<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"
    import="model.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>DataTables</title>
        <link href="css/demo_page.css" rel="stylesheet" type="text/css" />
        <link href="css/demo_table.css" rel="stylesheet" type="text/css" />
        <link href="css/demo_table_jui.css" rel="stylesheet" type="text/css" />
        <link href="css/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        var oTable;
        $(document).ready(function () {
        	
        	$("#patients tbody tr").click( function( e ) {
                if ( $(this).hasClass('row_selected') ) {
                    $(this).removeClass('row_selected');
                }
                else {
                    oTable.$('tr.row_selected').removeClass('row_selected');
                    $(this).addClass('row_selected');
                }
            });

        	$("#patients tbody td").live('dblclick',function(){
        	    var aPos = $('#patients').dataTable().fnGetPosition(this);
        	    var aData = $('#patients').dataTable().fnGetData(aPos[0]);
		      	      
        	    window.location.href = "patient.jsp?"+ "name=" + aData[0] + "&gender=" + aData[1] + "&bloodType=" 
        	    		+ aData[2] + "&dob=" + aData[3] + "&address=" + aData[4] + "&patientID=" + aData[5];
        	});
        	
        	
        	oTable = $("#patients").dataTable({
                "sPaginationType": "full_numbers",
                "bJQueryUI": true,
                "aoColumns": [ 
                  			/* Name */   null,
                  			/* Gender */  null,
                  			/* BloodType */ null,
                  			/* Birthday */  null,
                  			/* Address */    null,
                  			/* Patient ID */   { "bSearchable": false, "bVisible":    false }
                  		]
            });
        });
        
        /* Get the rows which are currently selected */
        function fnGetSelected( oTableLocal )
        {
            return oTableLocal.$('tr.row_selected');
        }
        </script>
    </head>
    <body>
        <div id="container">
            <div id="demo_jui">
		        <table id="patients" class="display">
		            <thead>
		                <tr>
		                    <th>Patient Name</th>
		                    <th>Gender</th>
		                    <th>Blood Type</th>
		                    <th>Birthday</th>
		                    <th>Address</th>
		                    <th>Patient ID</th>
		                </tr>
		            </thead>
		            <tbody>
		          		<% for(Patient pd: PatientSearch.getCertainColsPatients()){ %>
						  <tr>
						    <td><%=pd.getName() %></td>
						    <td><%=pd.getGender() %></td>
						    <td><%=pd.getBloodType() %></td>
						    <td><%=pd.getDOB()%></td>
						    <td><%=pd.getAddress() %></td>
						    <td><%=pd.getPatientID() %></td>
						  </tr>
						<% } %>
		            </tbody>
		        </table>
		    </div>
        </div>
    </body>
</html>